<h3>Interaction
   <small>Advanced bootstrap components for user interaction</small>
</h3>
<div class="row">
   <div class="col-lg-6">
      <h3 class="page-header mt0">Carousel</h3>
      <div ng-controller="CarouselDemoCtrl as caro">
         <div>
            <uib-carousel interval="caro.myInterval">
               <uib-slide ng-repeat="slide in caro.slides" active="slide.active">
                  <img ng-src="{{slide.image}}" style="margin: auto;" alt="" />
                  <div class="carousel-caption">
                     <h4>Slide {{$index}}</h4>
                     <p>{{slide.text}}</p>
                  </div>
               </uib-slide>
            </uib-carousel>
         </div>
         <div class="row pv">
            <div class="col-lg-6">
               <p>Interval, in milliseconds:</p>
               <input type="number" ng-model="caro.myInterval" class="form-control" />
            </div>
            <div class="col-lg-6">
               <p>Add a slide with a random image</p>
               <button type="button" ng-click="caro.addSlide()" class="btn btn-info">Add Slide</button>
            </div>
         </div>
      </div>
   </div>
   <div class="col-lg-6">
      <h3 class="page-header mt0">Typeahead</h3>
      <script type="text/ng-template" id="customTemplate.html">
         <a><img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16" alt=""/><span bind-html-unsafe="match.label | typeaheadHighlight:query"></span></a>
      </script>
      <div ng-controller="TypeaheadCtrl as tahead" class="typeahead-ctrl">
         <h5>Static arrays</h5>
         <div class="well well-sm">Model: {{tahead.selected | json}}</div>
         <input type="text" ng-model="tahead.selected" uib-typeahead="state for state in tahead.states | filter:$viewValue | limitTo:8" class="form-control" />
         <h5>Asynchronous results</h5>
         <div class="well well-sm">Model: {{tahead.asyncSelected | json}}</div>
         <input type="text" ng-model="tahead.asyncSelected" placeholder="Locations loaded via $http" uib-typeahead="address for address in tahead.getLocation($viewValue)" uib-typeahead-loading="loadingLocations"
         class="form-control" /><i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
         <h5>Custom templates for results</h5>
         <div class="well well-sm">Model: {{tahead.customSelected | json}}</div>
         <input type="text" ng-model="tahead.customSelected" placeholder="Custom template" uib-typeahead="state as state.name for state in tahead.statesWithFlags | filter:{name:$viewValue}" uib-typeahead-template-url="customTemplate.html"
         class="form-control" />
      </div>
   </div>
</div>
<div class="row">
   <div class="col-lg-6">
      <h3 class="page-header">Calendar</h3>
      <div ng-controller="DatepickerDemoCtrl as dp">
         <div class="well well-sm">
            <p class="m0">Selected date is:
               <em>{{dp.dt | date:'fullDate' }}</em>
            </p>
         </div>
         <div class="row">
            <div class="col-md-6">
               <h5>Inline</h5>
               <uib-datepicker ng-model="dp.dt" min-date="dp.minDate" show-weeks="true" class="ui-datepicker well well-sm"></uib-datepicker>
            </div>
            <div class="col-md-6">
               <h5>Popup</h5>
               <div class="row">
                  <div class="col-md-12">
                     <p class="input-group">
                        <input type="text" uib-datepicker-popup="{{dp.format}}" ng-model="dp.dt" is-open="dp.opened" min-date="dp.minDate" max-date="'2015-06-22'" uib-datepicker-options="dp.dateOptions" date-disabled="dp.disabled(date, mode)" ng-required="true"
                        close-text="Close" class="form-control" />
                        <span class="input-group-btn">
                           <button type="button" ng-click="dp.open($event)" class="btn btn-default">
                              <em class="fa fa-calendar"></em>
                           </button>
                        </span>
                     </p>
                  </div>
               </div>
               <div class="row">
                  <div class="col-md-12">
                     <label>Format:</label>
                     <select ng-model="dp.format" ng-options="f for f in dp.formats" class="form-control">
                        <option></option>
                     </select>
                  </div>
               </div>
               <hr/>
               <button type="button" ng-click="dp.today()" class="btn btn-sm btn-info">Today</button>
               <button type="button" ng-click="dp.dt = '2009-08-24'" class="btn btn-sm btn-default">2009-08-24</button>
               <button type="button" ng-click="dp.clear()" class="btn btn-sm btn-danger">Clear</button>
               <button type="button" ng-click="dp.toggleMin()" uib-tooltip="After today restriction" class="btn btn-sm btn-default">Min date</button>
            </div>
         </div>
      </div>
   </div>
   <div class="col-lg-6">
      <h3 class="page-header">Time picker</h3>
      <div ng-controller="TimepickerDemoCtrl as tp">
         <uib-timepicker ng-model="tp.mytime" ng-change="tp.changed()" hour-step="tp.hstep" minute-step="tp.mstep" show-meridian="tp.ismeridian"></uib-timepicker><pre class="alert alert-info">Time is: {{tp.mytime | date:'shortTime' }}        </pre>
         <div class="row">
            <div class="col-xs-6">Hours step is:
               <select ng-model="tp.hstep" ng-options="opt for opt in tp.options.hstep" class="form-control"></select>
            </div>
            <div class="col-xs-6">Minutes step is:
               <select ng-model="tp.mstep" ng-options="opt for opt in tp.options.mstep" class="form-control"></select>
            </div>
         </div>
         <hr/>
         <button ng-click="tp.toggleMode()" class="btn btn-info">12H / 24H</button>
         <button ng-click="tp.update()" class="btn btn-default">Set to 14:00</button>
         <button ng-click="tp.clear()" class="btn btn-danger">Clear</button>
      </div>
   </div>
</div>